<script setup lang="ts">
import { useRouter } from 'vue-router';
import type { FieldType } from 'vant';
import { Md5 } from 'ts-md5';
import { MobileUserStore } from '@/stores/modules/user.ts';
import { loginPost } from '@/services/login.ts';
import logoImage from '@/assets/images/yegoologo.png'; // 直接导入图片

const $router = useRouter();
const _MobileUserStore = MobileUserStore();
const formRef = ref();
const loading = ref(false);
const passwordShow = ref<FieldType>('password');
const postData = reactive({
  userName: '',
  password: '',
  isChecked: false,
});

const rules = reactive({
  userName: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
});

const onLoginClick = async () => {
  if (!postData.isChecked) {
    showToast('请先阅读并同意服务协议和隐私政策');
    return;
  }
  try {
    await formRef.value.validate();
    loading.value = true;
    const { err, data } = await loginPost({
      userName: postData.userName,
      password: Md5.hashStr(postData.password),
      isMobile: 'YES',
    });
    if (err) {
      showToast(err);
    } else {
      _MobileUserStore.setUserInfo(data.customer);
    }
    loading.value = false;
    $router.push({ path: '/', replace: true });
  } catch (errors) {
    console.log('表单验证失败', errors);
  }
};

const onClickServer = (type = 'policy') => {
  if (type === 'policy') {
    $router.push('/policy');
  } else if (type === 'password') {
    $router.push('/findPassword');
  } else if (type === 'clause') {
    $router.push('/clause');
  } else if (type === 'register') {
    $router.push('/register');
  } else {
    $router.push('/policy');
  }
};
</script>

<template>
  <div class="login-container">
    <div class="image-vant">
      <van-image :src="logoImage" />
    </div>

    <van-form :model="postData" :rules="rules" ref="formRef">
      <div class="vant-input">
        <van-field
          v-model="postData.userName"
          :rules="rules.userName"
          name="userName"
          placeholder="请输入手机号"
          clearable
        />
      </div>

      <div class="vant-input">
        <van-field
          v-model="postData.password"
          :type="passwordShow"
          :rules="rules.password"
          name="password"
          placeholder="请输入密码"
          @click-right-icon="passwordShow = passwordShow === 'password' ? 'text' : 'password'"
        >
          <template #right-icon>
            <div class="svgIcon">
              <svg-icon :icon-class="passwordShow === 'password' ? 'close' : 'open'" size="1.5em" />
            </div>
          </template>
        </van-field>
      </div>

      <div class="checkbox">
        <van-checkbox
          checked-color="#00BA9F"
          v-model="postData.isChecked"
          label-disabled
          icon-size="1.2em"
        />
        <div class="checkText">
          我已阅读并同意
          <span @click="onClickServer('clause')" style="color: #00ba9f">
            《耶购网上医疗器械平台服务协议》
          </span>
          和
          <span @click="onClickServer('policy')" style="color: #00ba9f">
            《耶购网上医疗器械平台隐私政策》
          </span>
        </div>
      </div>
      <van-button :loading="loading" type="primary" @click="onLoginClick" round block>
        登录
      </van-button>
    </van-form>

    <div class="login_footer">
      <div class="foot_box">
        <div @click="onClickServer('register')">注册新用户</div>
        |
        <div @click="onClickServer('password')">找回密码</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  background: #fff;

  .image-vant {
    width: 100%;
    margin: 162px 0 56px 0;
    text-align: center;

    .van-image {
      width: 80px;
      height: 80px;
    }
  }

  .vant-input {
    margin-top: 16px;
    width: 100%;
    background: #f6f6f6;

    .van-cell {
      background: #f6f6f6;
    }

    .svgIcon {
      display: flex;
    }
  }

  .van-button {
    margin: 40px 0;
  }

  .checkbox {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
    font-size: 12px;

    .van-checkbox {
      width: 30px;
      margin-top: 3px;
    }

    .checkText {
      color: #aaaaaa;
    }
  }

  .van-button {
    margin: 28px 0;
  }

  .login_footer {
    display: flex;
    justify-content: center;
    font-size: 13px;
    color: #787878;

    .foot_box {
      width: 165px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
